<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios</title>
</head>
<body>
<h1>axios入门</h1>
<div id="hello"></div>
<h1>axios带参</h1>
<div id="param"></div>
<h1>RestFul风</h1>
<div id="restful"></div>
<h1>Params属性</h1>
<div id="param2"></div>
<h1>POST</h1>
<div id="postAxios"></div>
<h1>POST/form</h1>
<div id="formSub"></div>
<script src="../js/axios.js"></script>
<script>
    //1.发起Get请求
    // 原始参数  1: url地址  参数2:提交参数  参数3:回调函数
    // 知识点: 传统的ajax的操作有"回调地狱问题" '闭包'
    // 回调地狱问题: 由于业务复杂,导致多重的ajax进行嵌套. 如果中间出现任何问题.则导致整个ajax调用失败.

    //参数 1: url地址  2.提交的参数
    //跨域请求: 浏览器不能正常执行!!!!
    let url = 'http://localhost:8090/hello'
    //不带参数的get请求
    axios.get(url)
    .then(res => {
        document.getElementById("hello").innerText = res.data
    })
    //带参数的get请求
    axios.get('http://localhost:8090/param?id=100')
        .then(result => {
            document.getElementById("param").innerText = result.data
        })
    //带参数的RestFul的get请求
    axios.get('http://localhost:8090/paramRest/100/tom')
        .then(result => {
            document.getElementById("restful").innerText = result.data
        })
    //get Params
    axios.get('http://localhost:8090/param',{
        params: {
            id: 2
        }
    })
        .then(result => {
            document.getElementById("param2").innerText = result.data
        })
    //post 传递对象
    axios.post('http://localhost:8090/postAxios',{
        id: 101,
        name: 'tomcat'
    })
        .then(result => {
            document.getElementById("postAxios").innerText = JSON.stringify(result.data)
        })
    //通过Form表单提交数据
    //1.定义form表单对象
    let params = new URLSearchParams();
    params.append('id',100)
    params.append('name','formData')
    axios.post('http://localhost:8090/postForm',params)
        .then(result => {
            // console.log(result.data)
            document.getElementById("formSub").innerText = JSON.stringify(result.data)
        })


</script>
</body>
</html>